<template>
  <layout :title-url="titleUrl" class="layout-wrap">
    <div class="layout">
      <div class="layout-west">
        <div class="mod mod-sjzl">
          <js-count title="数据总量" count="3743278285"></js-count>
        </div>
        <div class="mod mod-gxtj" ref="gxtj">
          <el-carousel trigger="click" arrow="never" :interval="5000" indicator-position="outside" class="mod-tab"
                       :height="sjtjHeight">
            <el-carousel-item v-for="item in 2" :key="item">
              <mod-title :title="item===1 ? '各地市数据上传情况统计' : '近一季度数据更新统计'"></mod-title>
              <bar-two :series-data="twoData1" :x-axis-data="twoXData" v-show="item===1"></bar-two>
              <bar-two :series-data="twoData2" :x-axis-data="twoXData" v-show="item===2"></bar-two>
            </el-carousel-item>
          </el-carousel>
        </div>
        <div class="mod mod-dttj">
          <mod-title title="数据更新动态统计"></mod-title>
          <ul>
            <li v-for="(data,index) in statics" :key="index">
              <span class="title" :title="data.title">
                <i :class="data.icon"></i>
                {{data.title}}
              </span>
              <span class="number" :title="data.num">{{data.num}}</span>
            </li>
          </ul>
        </div>
      </div>
      <div class="layout-main">
        <div class="mod mod-zltj">
          <div class="library" v-for="data in library">
            <span>{{data.title}}</span>
            <span>{{data.num}}亿</span>
          </div>
        </div>
        <div class="mod mod-zltjlb">
          <xdh-echarts :options="staticsOptions"></xdh-echarts>
        </div>
        <div class="mod mod-sjl">
          <div class="sjl-title"><span>数据采集流程</span></div>
          <js-flow></js-flow>
        </div>
      </div>
      <div class="layout-east">
        <div class="mod mod-fltj">
          <mod-title title="数据分类统计"></mod-title>
          <js-pie :echartData="echartData"></js-pie>
        </div>
        <div class="mod mod-lytj">
          <mod-title title="数据来源统计"></mod-title>
          <bar-one :series-data="oneData" :x-axis-data="oneXData"></bar-one>
        </div>
      </div>
    </div>
  </layout>
</template>

<style lang="scss">
  * {
    box-sizing: border-box;
  }

  .layout {
    height: 95%;
    padding-top: 60px;
    display: flex;

  .layout-west, .layout-east, .layout-main {
    height: 100%;
  }

  .layout-west, .layout-east {
    flex: 1
  }

  .layout-main {
    flex: 1.5;
    margin: 0 20px;
    padding-top: 90px;
  }

  }

  /*左侧*/
  .mod-sjzl {
    height: 20%;
  }

  .mod-gxtj {
    height: 45%
  }

  .mod-dttj {
    height: 35%;
    list-style: none;
    font-size: 22px;

  ul {
    width: 90%;
    margin: 20px 0 0;
  }

  li {
    height: 45px;
    line-height: 45px;
    overflow: hidden;

  .title {
    color: #628ff8;
    width: 60%;
    height: 45px;
    float: left;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

  .icon {
    font-weight: bold;
    font-size: 20px;
    float: left;
    margin-right: 20px;
  }

  }

  .number {
    width: 40%;
    height: 45px;
    float: right;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-weight: bold;
    font-size: 25px;
    color: #ffc22e;
    text-align: right;
  }

  }

  }

  .mod-tab {
    color: #e7f7ee;
  }

  /*中部*/
  .mod-zltj {
    height: 20%;
    display: flex;

  .library {
    width: 166px;
    height: 166px;
    background: url("../assets/images/statics-ball.png") center center no-repeat;
    padding: 20px 0 0;
    flex: 1;

  span {
    display: block;
    height: 70px;
    line-height: 60px;
    font-size: 24px;
    font-weight: bold;
    color: #fff;
    text-align: center;
  }

  }

  }

  .mod-zltjlb {
    height: 34%;
    padding-bottom: 20px;
  }

  .mod-sjl {
    height: 46%;

  .sjl-title {
    background: url('../assets/images/mod-title.png') center center no-repeat;
    text-align: center;
    height: 40px;

  span {
    display: inline-block;
    padding: 0 20px;
    line-height: 40px;
    font-weight: bold;
    color: #fff;
    font-size: 20px;
    background: #142d6a;
  }

  }
  }

  /*右侧*/
  .mod-fltj, .mod-lytj {
    height: 50%;
  }
</style>

<script>
  import ModTitle from '../components/mod-title.vue'
  import Layout from '../components/layout.vue'
  import BarOne from '../components/bar-one.vue'
  import BarTwo from '../components/bar-two.vue'
  import JsPie from '../components/js-pie.vue'
  import JsFlow from '../components/js-flow.vue'
  import JsCount from '../components/js-count.vue'
  import XdhEcharts from '../widgets/xdh-echarts'
  import {on, off} from 'element-ui/lib/utils/dom';

  const statics = [
    {
      icon: 'icon iconfont icon-role',
      title: '房产登记信息',
      num: 2398000
    },
    {
      icon: 'icon iconfont icon-role',
      title: '计生人口信息',
      num: 2398000
    },
    {
      icon: 'icon iconfont icon-role',
      title: '高铁订票信息',
      num: 2398000
    },
    {
      icon: 'icon iconfont icon-role',
      title: '航班订票信息',
      num: 2398000
    },
    {
      icon: 'icon iconfont icon-role',
      title: '旅馆住宿信息',
      num: 2398000
    },
    {
      icon: 'icon iconfont icon-role',
      title: '车辆违章信息',
      num: 2398000
    }
  ]

  const library = [
    {
      title: '汇聚库',
      num: '14'
    },
    {
      title: '标准库',
      num: '13'
    },
    {
      title: '专题库 ',
      num: '3'
    }
  ]

  const libraryColor = ['#43D3FF', '#FF9D0B', '#ED5655', '#23CB62', '#2B7CEA']

  const staticsX = ['原始库', '标准库', '专题库', '关系库', '轨迹库']
  const staticsData = [1, 2, 3, 4, 5]

  export default {
    components: {
      ModTitle,
      Layout,
      XdhEcharts,
      JsFlow,
      BarTwo,
      BarOne,
      JsPie,
      JsCount
    },
    data() {
      return {
        titleUrl: require('../assets/images/data_monitor_title.png'),
        statics: statics,
        library: library,
        staticsOptions: {
          grid: {
            show: false,
            containLabel: true,
            left: 0,
            top: 0,
            right: 0,
            bottom: 0
          },
          xAxis: {
            gridIndex: 0,
            axisTick: {
              alignWithLabel: true
            },
            axisLine: {
              lineStyle: {
                color: 'rgba(255,255,255,.25)'
              }
            },
            axisLabel: {
              color: '#fff',
              fontSize: 18
            },
            data: staticsX
          },
          yAxis: {
            show: false,
            max: 8
          },
          series: [
            {
              name: 'dotted',
              type: 'pictorialBar',
              symbol: 'rect',
              itemStyle: {
                normal: {
                  color: function (params) {
                    const num = libraryColor.length
                    return libraryColor[params.dataIndex % num]
                  }
                }
              },
              label: {
                normal: {
                  show: true,
                  position: 'top',
                  fontSize: 24,
                  fontWeight: 'bold',
                  formatter: function (params) {
                    return params.value + '亿'
                  }
                }
              },
              symbolRepeat: true,
              symbolSize: [80, 12],
              symbolMargin: 4,
              z: 0,
              data: staticsData
            },
            {
              name: 'dotted',
              type: 'pictorialBar',
              symbol: 'rect',
              itemStyle: {
                normal: {
                  color: function (params) {
                    const num = libraryColor.length
                    return libraryColor[params.dataIndex % num]
                  },
                  opacity: 0.2
                }
              },
              symbolRepeat: true,
              symbolSize: [80, 12],
              symbolMargin: 1,
              z: -2,
              data: staticsData
            }
          ]
        },
        gxtjHeight: '',
        echartData: [
          {value: 335, name: '人员主体类'},
          {value: 310, name: '机构主题类'},
          {value: 234, name: '案事件类'},
          {value: 235, name: '资产类'},
          {value: 335, name: '地址类'},
          {value: 335, name: '资产类'}
        ],
        oneData: [500, 2000, 1360, 1000, 10000, 2000, 1360, 1000],
        oneXData: ['纪委', '公安税务', '国土', '社保', '工商', '通信', '金融', '民政'],
        twoData1: [43080000, 52135000, 46660000, 98680000, 56200000, 68000000, 56200000, 68000000, 52135000, 46660000, 98680000, 56200000, 68000000, 78900000],
        twoXData: ['省纪委', '南京', '无锡', '徐州', '常州', '苏州', '南通', '连云港', '淮安', '盐城', '扬州', '镇江', '泰州', '宿迁'],
        twoData2: [13080000, 22135000, 36660000, 48680000, 56200000, 68000000, 76200000, 88000000, 42135000, 56660000, 68680000, 76200000, 88000000, 58900000]
      }
    },
    computed: {
      sjtjHeight() {
        return this.gxtjHeight + 'px'
      }
    },
    methods: {
      accumulateHeight() {
        this.gxtjHeight = this.$refs.gxtj.clientHeight - 40
      }
    },
    mounted() {
      this.gxtjHeight = this.$refs.gxtj.clientHeight - 40
      on(window, 'resize', this.accumulateHeight);
    },
    beforeDestroy() {
      off(window, 'resize', this.accumulateHeight);
    }
  }
</script>
